<template>
  <div id="customerList">
    <div class="titleTop">
      <div class="titleLeft">
        <i class="iconfont icontongyong_dangqianweizhi"></i>
        <span>客户</span>
        <i class="el-icon-arrow-right"></i>
        <span>客户列表</span>
        <i class="el-icon-arrow-right"></i>
        <span class="active">客户信息</span>
      </div>
      
    </div>
    <div class="tittop">
      <div class="tpleft">
        <h2>{{nameCom}}</h2>
        <ul>
          <!-- <li v-for="(item, index) in lists" :class="item.class" :key="index">{{item.name}}</li> -->
          <li class="firstb" >{{typeCom}}</li>
        </ul>
        <!-- <el-button type="success">审核通过</el-button> -->
      </div>

      <div class="topright" v-show="showright">
        <i class="iconfont iconshuaxin"></i>
        <el-button @click="changeSwitch" type="text">{{currentCont}}</el-button>
      </div>
    </div>
    <div class="project">
      <div class="first relative" style="overflow: auto;">
        <h3>执行中项目</h3>
        <article class="absoulte">
          <!-- <p>XX保理—阳光城供应链ABN项目</p> 
            <p>XX保理—河南省郑州市第二合作项目</p> 
          <p>XX保理—河南省郑州市第贰合作项目</p>-->
          <p v-for="(item, index) in projectStatus" :key="index">{{item.projectName}}</p>
        </article>
      </div>
      <div class="sec">
        <h3>应收账款</h3>
        <article style="margin-top:40px">
          <p style="width: auto;color: #FDFA04">￥{{receiveStatus.receiveAmount | toThousands}}</p>
        </article>
      </div>
      <div class="three">
        <h3>执行中项目</h3>
        <article>
          <p>
            计划投放：
            <span>{{marketStatus[0].value}}</span>亿元
          </p>
          <p>
            已 投 放：
            <span>{{marketStatus[1].value}}</span>亿元
          </p>
        </article>
      </div>
    </div>
    <section class="seccontent">
      <!-- <header>
        <nav>
          <ul>
            <li
              v-for="(item, index) in navlists"
              :class="item.isactive ? 'active' : ''"
              :key="index"
            >
              <router-link
                @click.native="changeItem(item)"
                :to="'/customerList/' + item.path"
              >{{item.name}}</router-link>
            </li>
          </ul>
        </nav>
      </header> -->
      <router-view style="margin-top:60px;"></router-view>
    </section>
  </div>
</template>

<script>
export default {
  name: "customerList",
  data() {
    return {
      nameCom: '',
      typeCom: '',
      search: "",
      currentCont: '客户证照文件',
      lists: [
        { name: "供应商", class: "firstb" },
        { name: "总包方", class: "secy" },
        { name: "核心企业", class: "thrr" }
      ],
      navlists: [
        { name: "基本信息", isactive: true, path: "basicInfo" },
        { name: "证照文件", isactive: false, path: "licenseFile" },
        // { name: "工商信息", isactive: false, path: "business" },
        // { name: "经营", isactive: false, path: "licenses" },
        // { name: "涉诉", isactive: false, path: "litigation" },
        // { name: "资产交易", isactive: false, path: "transaction" },
        // { name: "事件", isactive: false, path: "events" },
        // { name: "关联图", isactive: false, path: "picture" }
      ],
      showright: true,
      projectStatus: [],
      marketStatus: [
        {
          type: "计划投放",
          value: 0
        },
        {
          type: "已经投放",
          value: 0
        }
      ],
      receiveStatus: {}
    };
  },
  created() {
     this.nameCom = sessionStorage.getItem('customerName');
     this.typeCom = sessionStorage.getItem('customerType');
     this.getdata();
  },
  methods: {
    getdata() {
      this.axios.get("AdminAPI/project/home", {params: {clientId: sessionStorage.getItem('customerId')}}).then(({ data }) => {
        
        this.projectStatus = data.data.projectStatus;
       this.marketStatus = data.data.marketStatus;
        this.receiveStatus = data.data.receiveStatus;
      });
    },
    changeItem(item) {
      this.navlists.forEach(item => {
        item.isactive = false;
      });
      item.isactive = true;
    },
    changeSwitch() {
      if(this.currentCont == '客户详细信息') {
        this.currentCont = '客户证照文件'
        this.$router.push('basicInfo')
      } else {
        this.currentCont = '客户详细信息'
        this.$router.push('licenseFile')
      }
    }
  },
  filters: {
    //每隔三位小数加逗号
    toThousands: function(num) {
      
      if(num != undefined) {
        var str = num.toString();
        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg,"$1,");
      } else {
        return ''
      }
      
    }
  },
  watch: {
    $route(to) {
      // if (to.name == "basicInfo") {
      //   this.showright = true;
      // } else {
      //   this.showright = false;
      // }
    }
  }
};
</script>

<style lang="scss">
#customerList {
  .titleTop {
    height: 50px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 0px rgba(189, 189, 190, 0.5);
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    padding: 0 50px 0 12px;
    align-items: center;
    .iconfont {
      font-size: 20px;
    }
    .active {
      color: #1e7cf0;
    }
  }
  .tittop {
    display: flex;
    background: #e2eefd;
    align-items: center;
    padding-left: 8px;
    height: 60px;
    background: rgba(226, 238, 253, 1);
    box-shadow: 0px 0px 1px 0px rgba(189, 189, 190, 0.5);
    border-radius: 3px;
    .tpleft {
      width: 86%;
      display: flex;

      align-items: center;
      h2 {
        margin-right: 20px;
        font-size: 20px;
      }
      ul {
        list-style-type: none;
        display: flex;
        width: 72%;
        height: 32px;
        li {
          border: 1px solid;
          border-radius: 5px;
          padding: 5px;
          font-size: 15px;
          margin-right: 20px;
          line-height: 20px;
        }

        .firstb {
          color: #1e7cf0;
          border-color: #1e7cf0;
        }
        .secy {
          color: #f29207;
          border-color: #f29207;
        }
        .thrr {
          color: #c90303;
          border-color: #c90303;
        }
      }
    }
    .topright {
      padding-left: 40px;
      border-left: 1px solid #b9b9b9;
      .iconshuaxin {
        color: #c90303;
        font-size: 20px;
      }
    }
  }

  .seccontent {
    ul {
      list-style-type: none;
      display: flex;
      margin: 0 auto;
      width: 90%;
      @each $a in hover, active, visited, link {
        a:#{$a} {
          color: #333;
        }
      }
      // a:hover, a:active, a:visited, a:link {
      //   color: #333;
      // }

      li {
        width: 166px;
        height: 42px;
        margin-right: 12px;
        background: #d9d9d9;
        color: #333333;
        text-align: center;
        line-height: 42px;
      }
      .active {
        background: #1e7cf0;
        a {
          color: white !important;
        }
      }
    }
  }
  .relative {
    position: relative;
    .absoulte {
      position: absolute;
      left: 0;
      right: 0px;
      padding-left: 40px;
      padding-right: 20px;
      box-sizing: border-box;
      top: 68px;
      bottom: 0;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
